<script setup>
import { ref, reactive } from "vue";

let titlearr = ["免费送车上门", "24小时热线", "价格计算方式", "理赔说明"];
let contenbodyarr = [
  `可选服务

在成都租车成都蓉之风租车为您提供以下可选服务，只要您在预订时提出需求，就能轻松享受各项便利。
1.送车上门服务：
　我们可将车辆送至您指定的地点，为您现场办理租车手续。
　(1)　成都送车上门范围请在首页选择成都蓉之风在线客服中心咨询；
　(2)　此项服务仅在9:00-20:00提供，为满足您的需求，请务必提前4个工作小时预订；
　(3)　订单提交后，您需支付一定金额的预付款；成功预订后，如因您的缘故无法履约，取车前4小时以上取消订
单，可全额退还预付款，否则该费用恕不退还。
2.上门取车服务：
　租期结束，我们可到您指定的地点取回车辆，为您现场办理还车手续。
　(1)　成都上门取车的具体范围请在首页选择成都蓉之风租车客服咨询；
　(2)　此项服务仅在9:00-20:00提供，为满足您的需求，请务必提前4个工作小时预订；
　(3)　为合理判断车辆损伤、维护您的权益，如车辆在使用过程中出现事故或故障，请将车辆归还到门店。`,
  `24小时热线：02887327655 18980602655`,
  `一. 如车辆不慎出险，请您注意人身安全，并立即致电成都蓉之风租车24小时热线02887327655 18980602655报
 案，车辆需由保险公司定损后再修理；

二. 为避免处理不当给您带来损失，请您按以下指引处理事故：

2. 如遇对方车辆肇事逃逸的、对方车辆无号牌的、对方驾驶员无驾驶证或饮酒后驾驶车辆的，请您记录相关信息（如
车牌号，车辆品牌，颜色以及肇事地点）并立即报警（122），等候交警处理，同时请您致电02887327655 
18980602655 以获得保险方面的咨询和建议。

3. 如车辆与障碍物、建筑物发生碰撞，或车辆停放期间被碰撞而找不到肇事者，请您将车辆损坏部位以及碰撞物体进
行比对拍照，并致电02887327655 18980602655，以便车辆能够得到及时修复；

4. 如遇重大交通事故且有人员伤亡的，请保护现场，并拨打122交通事故报警台求助，同时请立即致电02887327655 
18980602655以获得保险方面的咨询和建议。`,
  `理赔说明

1. 以下情况及其他保险公司不予赔偿的情况，造成的所有经济损失和后果将由您自行承担，请您务必避免：
　(1)　超过48小时报案；
　(2)　饮酒后驾驶车辆；
　(3)　无证驾驶车辆；
　(4)　持逾期未审验的驾驶执照驾驶车辆；
　(5)　发生事故后驾车逃逸。
2.如车辆不慎出险，请您注意人身安全，并立即致电成都蓉之风租车24小时热线028-87327655 18980602655报案、
收集理赔材料。齐全的理赔材料可以节省您的理赔等待时间：
　(1)　在您还车并提交了齐全的理赔资料时，您不需要垫付本车维修等保险公司应付费用，仅需：
　　　a) 支付上表列明的保险责任内的由承租方承担的损失，以及保险责任外的所有责任和损失
　　　（如您已经购买尊享服务，保险责任范围外的轮胎损失您可以免于承担）；
　　　b) 垫付第三方损失，该费用将在保险公司完成理赔后返还给您；(在您全责或主责的情况下，如第三方同意在
　　　成都蓉之风租车指定维修单位定损、维修，该费用将无需您垫付)
　(2)　在您还车不能提供齐全的理赔资料时，请根据预估的车辆损失刷取最低1500元的维修押金，该押金将在您提交
完材料后的3天内发起退款（到账时间以各银行为准）。。`,
];
// 点击相应标签 改变页面展示内容
let count = ref(0);
let link = reactive(["linkon", "link", "link", "link"]);

let qiehuan = (digital) => {
  count.value = digital;

  // 排他
  for (let a = 0; a < link.length; a++) {
    if (a == digital) {
      link[a] = "linkon";
      console.log(a, digital);
    } else {
      link[a] = "link";
    }
  }
  console.log(link[digital], link);
};
</script>
<template>
  <Navigation></Navigation>
  <div class="imgbox">
    <img
      src="http://www.028rzf.com/public/uploads/images/2018/08/20180815182906120.jpg"
      alt=""
    />
  </div>
  <div class="context">
    <div class="title">
      <div>
        <p>服务说明</p>
      </div>
      <ul>
        <li
          @click="qiehuan(index)"
          :class="link[index]"
          v-for="(item, index) in titlearr"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="contenttitle">
        <h1>{{ titlearr[count] }}</h1>
      </div>
      <div class="contenbody">
        <pre>{{ contenbodyarr[count] }}</pre>
      </div>
    </div>
  </div>
  <Liucheng></Liucheng>
  <Footer1></Footer1>
</template>
<style scoped>
.imgbox {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
img {
  margin: auto -100%;
  vertical-align: middle;
}
.context {
  width: 1200px;
  display: flex;
  margin: auto;
  justify-content: space-between;
  font: 16px/1 "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: rgb(102, 102, 102);
  margin-top: 30px;
}
.content {
  width: 930px;
  /* background-color: aquamarine; */
  /* margin-left: 20px; */
  border: 1px solid rgb(238, 238, 238);
}
.title {
  width: 230px;
}
.title div {
  background-color: rgb(238, 238, 238);
  height: 50px;
  line-height: 50px;
}
.title p {
  margin-left: 20px;
  color: rgb(102, 123, 172);
}
.title ul {
  list-style-type: none;
}
.title ul li {
  height: 35px;
  line-height: 35px;
  border: 1px solid rgb(238, 238, 238);
  padding-left: 20px;
}

.contenttitle {
  height: 100px;
  border-bottom: 1px solid rgb(238, 238, 238);
}
.contenttitle h1 {
  padding: 30px 50px;
  font-size: 30px;
  font-weight: 500;
  line-height: 40px;
  color: #333333;
}
pre {
  padding: 32px 50px;
  font-size: 16px;
  line-height: 26px;
  color: rgb(102, 102, 102);
  font-weight: 600;
}
.link:hover {
  color: red;
}
.linkon {
  background-color: rgb(219, 37, 52);
  color: aliceblue;
}
</style>
